<script type="text/javascript" >
    jQuery(document).ready(function(){
        stToolBarCustom.load_tooltip('#socialButton');
        //hide toolbar and make visible the 'show' button
        jQuery("td.bgRight").click(function() {
            jQuery("#toolbar").slideToggle("slow");
            jQuery("#toolbarbut").slideToggle("slow");
        });
        jQuery("td.bgRight1").click(function() {
            jQuery("#toolbar").slideToggle("slow");
            jQuery("#toolbarbut").slideToggle("slow");
        });
        jQuery("#draggable").draggable();
    });
    var stToolbar = {
        facebookShow: function(){
            jQuery("#draggable").fadeOut();
            jQuery.blockUI({
                message: jQuery('#loading'),
                css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                }
            });
            jQuery('#imageTitle').attr('src','<?php echo $config ['imagesUrl'] ?>facebook_icon.png')
//            jQuery('#textTitle').html(" Become a Fan'");
            data = '<iframe allowtransparency="true" height="430" style="width:800px" frameborder="0" scrolling="no"  src="<?php echo $config['pluginPath'] . "views/showFbFanPage.php?pid={$option['toolFBPageID']}&api_key={$config['facebook_api_key']}&url=" . home_url('/'); ?>">Facebook</iframe>'
            jQuery("#toolbaContent").html(data);
            jQuery("#draggable").fadeIn();
            
            jQuery.unblockUI();
        },

        closeWindow: function(){
            jQuery("#draggable").fadeOut();
        },

        youtubeShow: function(){
            jQuery("#draggable").fadeOut();
            var post_data = "page=stToolBar&action=showYoutubePage&ajax=1";
            var ajax_url = location.href;
            jQuery.ajax({
                type: "POST",
                url: ajax_url +"?"+post_data,
                cache: false,
                beforeSend: function(){
                    jQuery.blockUI({
                        message: jQuery('#loading'),
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .5,
                            color: '#fff'
                        }
                    });
                    jQuery('#imageTitle').attr('src','<?php echo $config ['imagesUrl'] ?>youtubeLogo.png')
//                    jQuery('#textTitle').html(" 's channel");
                }, //show loading just when link is clicked
                complete: function(){
                    //jQuery('.pp_loaderIcon').hide();
                }, //stop showing loading when the process is complete
                success: function(data){
                    jQuery("#toolbaContent").html(data);
                    jQuery("#draggable").fadeIn();
                    jQuery.unblockUI();
                }
            });
        },
        youtubeElementClick: function(videoId){
            //            var videoId = jQuery(this).attr('videoId');
            var post_data = "page=stToolBar&action=showYoutubePage&ajax=1&videoId="+videoId;
            var ajax_url = location.href;
            jQuery.ajax({
                type: "POST",
                url: ajax_url,
                data: post_data,
                cache: false,
                beforeSend: function(){
                    jQuery.blockUI({
                        message: jQuery('#loading'),
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            'border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .5,
                            color: '#fff'
                        }});
                }, //show loading just when link is clicked
                complete: function(){
                    jQuery.unblockUI();
                }, //stop showing loading when the process is complete
                success: function(data){
                    jQuery("#toolbaContent").html(data);
                    jQuery("#draggable").fadeIn();
                }
            });
        }

    };
    
</script>
<div id="toolbarContainer" >
    <div id="toolbarbut" class="w95p mc">
        <table cellpadding="0" cellspacing="0" align="right">
            <tr>
                <td class="bgLeft"></td>
                <td class="mid">
                    <div class="w100p">
                        <p ><a style="padding:6px 10px 0px 10px; color:#ff4500; margin: 0" href="http://www.socialmediatoolbox.no/" target="_blank">SocialMediaToolbox</a></p>
                    </div>
                </td>
                <td class="bgRight1"></td>
            </tr>
        </table>
    </div>
    <div id="toolbar" class="w95p mc">
        <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td class="bgLeft"></td>
                <td class="mid">
                    <div class="w100p">
                        <?php if ($option['hasLikeButton']) {
                        ?>
                            <div id="fbLikeButton" class="float_left" style="padding:6px 0px 0px 10px; height: 20px;">
                                <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
                                <fb:like href="<?php echo home_url() ?>" show_faces="true" height="20" width="450"></fb:like>
                                <div class="clear_left"></div>
                            </div>
                        <?php } ?>
                        <div class="float_right po">
                            <ul id="socialButton" title="&nbsp;">
                                <?php if ($option['showFbFanPage']) {
                                ?>
                                    <li onclick="stToolbar.facebookShow()" title="Besøk vår Facebook-side">
                                        <div  class="facebook">
                                            &nbsp;
                                        </div>
                                    </li>
                                <?php } ?>
                                <?php if ($option['showYoutubePage']) {?>
                                    <li onclick="stToolbar.youtubeShow()" title="Besøk vår YouTube-kanal">

                                        <div  class="youtube">
                                            &nbsp;
                                        </div>

                                    </li>
                                <?php } ?>
                                <!--
                                    <li>
                                        <a title="FanPage"><div class="flickr"> </div></a>
                                    </li>
                                    <li >
                                        <a title="FanPage"><div class="facebook"> </div></a>
                                    </li>
                                    <li >
                                        <a title="FanPage"><div class="facebook"> </div></a>
                                    </li>
                                -->
                            </ul>
                            <div class="clear_left"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </td>
                <td class="bgRight"></td>
            </tr>
        </table>
    </div>

    <div id="draggable" style="width: 100%;">
        <div id="loading">Please Wait...</div>
        <div class="socialmediatoolboxes_wiwi_header_main" style="float: left">
            <div id="socialmediatoolboxes_wiwi_hl">
            </div>
            <div class="socialmediatoolboxes_wiwi_header" style="width: 780px; cursor: move;">
                <div class="socialmediatoolboxes_wiwi_title">
                    <img id="imageTitle" style="float: left; margin-top: 6px !important;" height="22" src="<?php echo $config ['imagesUrl'] ?>youtubeLogo.png" alt="Popout" class="socialmediatoolboxes_wiwi_icon">
                    <span id="textTitle" style="float: left; margin: 14px 0 0 0 ;"></span>
                </div>
                <div class="socialmediatoolboxes_wiwi_close" onlick="stToolbar.closeWindow();">
                    <div class="socialmediatoolboxes_wiwi_close_a" onclick="stToolbar.closeWindow();">
                        &nbsp;
                    </div>
                </div>
            </div>
            <div id="socialmediatoolboxes_wiwi_hr">
            </div>
        </div>
        <div id="toolbaContent" style="height: 430px; float:left">
        </div>
        <div class="socialmediatoolboxes_wiwi_footer_main">
            <div id="socialmediatoolboxes_wiwi_fl">
            </div>
            <div class="socialmediatoolboxes_wiwi_footer" style="width: 780px;">
                <div>
                    <a href="javascript: stToolbar.closeWindow();" class="socialmediatoolboxes_wiwi_close_window" style="">Close window</a>
                </div>
            </div>
            <div id="socialmediatoolboxes_wiwi_fr">
            </div>
        </div>
    </div>
</div>